<template>
  <el-dialog title="分配权限" :visible.sync="visible" @close="btnPermCancel">
    <!-- 权限是一颗树 -->
    <!-- 将数据绑定到组件上 -->
    <!-- check-strictly 如果为true 那表示父子勾选时  不互相关联 如果为false就互相关联 -->
    <!-- id作为唯一标识 -->
    <el-tree
      ref="permTree"
      :data="permData"
      :props="defaultProps"
      :show-checkbox="true"
      :check-strictly="true"
      :default-expand-all="true"
      :default-checked-keys="selectCheck"
      node-key="id"
    />
    <!-- 确定 取消 -->
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button
          type="primary"
          size="small"
          @click="btnPermOK"
        >确定</el-button>
        <el-button size="small" @click="btnPermCancel">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
// 调用分配权限接口
import { roleAllot } from '@/api/setting'
export default {
  data() {
    return {
      visible: false, // 是否显示
      defaultProps: {
        label: 'name'
      },
      permData: [], // 专门用来接收权限数据 树形数据
      selectCheck: [], // 定义一个数组来接收 已经选中的节点
      roleId: null // 用来记录分配角色的id
    }
  },

  methods: {
    // 点击确认按钮调用接口分配角色权限
    async btnPermOK() {
      // 调用组件方法获取选中的权限
      this.selectCheck = this.$refs.permTree.getCheckedKeys()
      // 调用接口分配权限
      await roleAllot({
        id: this.roleId,
        permIds: this.selectCheck
      })
      this.$message.success('分配权限成功')
      this.visible = false
    },
    // 点击取消按钮
    btnPermCancel() {
      this.selectCheck = [] // 重置数据
      this.visible = false // 关闭弹框
    }
  }
}
</script>

<style></style>
